<template>
    <i-module>
        <div :class="ns.b()">
            <!-- 头部用户信息区域 -->
            <view class="header">
                <!-- 用户信息展示及点击跳转 -->
                <view class="user" @click="onJumpUserDetail">
                    <!-- 用户头像，包含实名认证标识 -->
                    <view class="avatar" :style="{ backgroundImage: `url(${userInfo.avatar})` }">
                        <view class="real">
                            <uni-icons type="fire-filled" size="15" color="#4AB8B0" />
                        </view>
                    </view>
                    <!-- 用户名称及粉丝信息 -->
                    <view class="name">
                        <text class="tts-text-h5">{{ userInfo.name }}</text>
                        <view class="subtitle">
                            <text class="IP">{{ userInfo.ip }}</text>
                            <text>&nbsp;·&nbsp;</text>
                            <text>{{ userInfo.fans }} 人关注了他</text>
                        </view>
                    </view>
                </view>
                <!-- 更多操作按钮 -->
                <view class="more">
                    <uni-icons type="more-filled" size="18" color="#999" />
                    <!-- <i-button type="primary" :plain="!isConcern" @click="onConcern">{{ concernText }}</i-button>-->
                </view>
            </view>

            <!-- 动态内容主体区域 -->
            <view class="main">
                <view class="content">
                    <!-- 动态文字内容，支持HTML格式 -->
                    <view class="text tts-text-main" v-html="content" @click="onContent"></view>

                    <!-- 图片展示区域，根据图片数量动态调整布局 -->
                    <template v-if="isExistenceImage">
                        <view :class="['theme', `theme-${images.length}`]">
                            <view
                                v-for="(item, index) in images"
                                :key="index"
                                class="theme-item"
                                @click="onPreviewImage(index)"
                            >
                                <i-image
                                    class="image"
                                    width="100%"
                                    :src="item.url"
                                    mode="aspectFill"
                                    placeholder-text="正在加载图片..."
                                    error-text="图片加载失败"
                                />
                            </view>
                        </view>
                    </template>
                </view>
            </view>

            <!-- 底部操作栏 -->
            <view class="footer">
                <view class="operation">
                    <!-- 点赞操作，支持Lottie动画效果 -->
                    <view class="operation-item active" @click="onGood">
                        <template v-if="isGoodLottie">
                            <view class="lottie-icon">
                                <i-lottie
                                    ref="goodLottieRef"
                                    :animation-data="goodOfLottie"
                                    :height="300"
                                    :width="300"
                                    @ready="onLottieReady"
                                    @done="onLottieDone"
                                />
                            </view>
                        </template>

                        <uni-transition :show="!isGoodLottie">
                            <view class="flex">
                                <template v-if="isLike">
                                    <view class="icon">
                                        <image class="icon-image" src="/static/images/icon/start-active-icon.svg" />
                                    </view>
                                </template>
                                <template v-else>
                                    <view class="icon">
                                        <image class="icon-image" src="/static/images/icon/start-icon.svg" />
                                    </view>
                                </template>
                                <text class="num">{{ formatNumberImproved(like) }}</text>
                            </view>
                        </uni-transition>
                    </view>

                    <!-- 踩操作 -->
                    <view class="operation-item" @click="onBad">
                        <template v-if="isLike">
                            <view class="icon">
                                <image class="icon-image" src="/static/images/icon/not-start-icon.svg" />
                            </view>
                        </template>
                        <template v-else>
                            <view class="icon">
                                <image class="icon-image" src="/static/images/icon/not-start-icon.svg" />
                            </view>
                        </template>
                        <text class="num">{{ formatNumberImproved(bad) }}</text>
                    </view>

                    <!-- 评论操作 -->
                    <view class="operation-item" @click="onComments">
                        <view class="icon">
                            <image class="icon-image" src="/static/images/icon/comment-icon.svg" />
                        </view>
                        <text class="num">{{ formatNumberImproved(comment) }}</text>
                    </view>

                    <!-- 分享操作 -->
                    <view class="operation-item" @click="emits('share')">
                        <view class="icon">
                            <image class="icon-image" src="/static/images/icon/share-icon.svg" />
                        </view>
                        <text class="num">{{ formatNumberImproved(share) }}</text>
                    </view>
                </view>
            </view>
        </div>
    </i-module>
</template>

<script setup lang="ts">
import { formatNumberImproved } from "@/utils";
import goodOfLottie from "@/assets/lotties/like-lottie.json";
import { useNamespace, useRequest } from "@/hooks";
import { useDynamicStore } from "@/store";

const ns = useNamespace("dynamic");

/**
 * @description 定义组件事件发射器
 * @param {Array} events - 可发射的事件列表
 *   - share: 分享事件
 *   - good: 点赞事件
 *   - comments: 评论事件
 *   - bad: 踩事件
 *   - image: 图片预览事件
 */
const emits = defineEmits(["share", "good", "comments", "bad", "image"]);

const dynamicStore = useDynamicStore();

/**
 * @description 控制点赞Lottie动画是否显示
 * @type {Ref<boolean>}
 */
const isGoodLottie = ref(false);

/**
 * @description 点赞Lottie动画组件引用
 * @type {Ref<Object>}
 */
const goodLottieRef = ref();

/**
 * @description 定义组件接收的属性
 * @property {string} id - 动态ID
 * @property {boolean} isConcern - 是否已关注
 * @property {number} concern - 关注数
 * @property {boolean} isLike - 是否已点赞
 * @property {number} like - 点赞数
 * @property {number} bad - 踩数
 * @property {number} share - 分享数
 * @property {number} comment - 评论数
 * @property {string} content - 动态内容
 * @property {Array} images - 图片数组
 * @property {Object} user - 用户信息对象
 */
const props = defineProps({
    id: {
        type: String,
        default: ""
    },
    isConcern: {
        type: Boolean,
        default: false
    },
    concern: {
        type: Number,
        default: 0
    },
    isLike: {
        type: Boolean,
        default: false
    },
    like: {
        type: Number,
        default: 0
    },
    bad: {
        type: Number,
        default: 0
    },
    share: {
        type: Number,
        default: 0
    },
    comment: {
        type: Number,
        default: 0
    },
    content: {
        type: String,
        default: ""
    },
    images: {
        type: Array,
        default: () => []
    },
    user: {
        type: Object,
        required: true
    }
});

const { id, name, avatar, ip, fans } = props.user || {};

/**
 * @description 用户信息数据
 * @property {string} id - 用户ID
 * @property {string} name - 用户名称
 * @property {string} avatar - 用户头像URL
 * @property {string} ip - 用户IP归属地
 * @property {number} fans - 粉丝数量
 */
const userInfo = ref({
    id,
    name,
    avatar,
    ip,
    fans
});

/**
 * @description 检查是否存在图片
 * @returns {boolean} 是否存在图片
 */
const isExistenceImage = computed(() => props.images?.length > 0);

/**
 * @description 根据关注状态返回显示文本
 * @returns {string} 关注状态文本('已关注'或'关注')
 */
const concernText = computed(() => {
    return props.isConcern ? "已关注" : "关注";
});

/**
 * @description Lottie动画准备完成回调
 * @returns {void}
 */
const onLottieReady = () => {
    goodLottieRef.value.play();
};

/**
 * @description Lottie动画播放完成回调
 * @returns {void}
 */
const onLottieDone = () => {
    isGoodLottie.value = false;
};

/**
 * @description 处理点赞操作
 * @returns {void}
 */
const onGood = () => {
    emits("good");
    uni.vibrateShort();

    isGoodLottie.value = true;
};

/**
 * @description 处理踩操作
 * @returns {void}
 */
const onBad = () => {
    emits("bad");
    uni.vibrateShort();
};

/**
 * @description 处理内容点击事件，跳转到动态详情
 * @returns {void}
 */
const onContent = () => {
    onJumpDynamicDetail();
};

/**
 * @description 处理评论点击事件，跳转到动态详情
 * @returns {void}
 */
const onComments = () => {
    onJumpDynamicDetail();
};

/**
 * @description 跳转到动态详情页面
 * @returns {void}
 */
const onJumpDynamicDetail = () => {
    uni.navigateTo({
        url: `/packages/dynamic/index?id=${props.id}`
    });
};

/**
 * @description 跳转到用户详情页面
 * @returns {void}
 */
const onJumpUserDetail = () => {
    uni.navigateTo({
        url: `/packages/he/index?id=${props.id}`
    });
};

/**
 * @description 预览图片
 * @param {number} index - 当前图片索引
 * @returns {void}
 */
const onPreviewImage = (index: number) => {
    uni.previewImage({
        current: index,
        urls: props.images?.map((item) => item.url)
    });

    emits("image", {
        index,
        urls: props.images
    });
};

/**
 * @description 关注请求实例
 * @property {string} url - 请求地址
 * @property {string} method - 请求方法
 * @property {Object} options - 请求配置选项
 *   - retryCount: 重试次数
 *   - retryDelay: 重试延迟时间
 *   - cacheTime: 缓存时间
 *   - onSuccess: 成功回调
 *   - onError: 失败回调
 */
const concernInstance = useRequest("/user/concern", "GET", {
    retryCount: 3,
    retryDelay: 5000,
    cacheTime: 500,
    onSuccess: ({ data }) => {
        if (data) {
            console.log(dynamicStore.getDynamic(props.id as string));
        }
    },
    onError: (error) => {
        console.log("error", error);
    }
});

/**
 * @description 处理关注操作
 * @returns {void}
 */
const onConcern = () => {
    concernInstance.run();
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
